<html>
<head>
    <title>Using requestAnimationFrame()</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        body {
        background: #dddddd;
    }

        #canvas {
        background: #ffffff;
        cursor: pointer;
        margin-left: 10px;
        margin-top: 10px;
        -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
        -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
        box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    }

        #controls {
        margin-top: 10px;
        margin-left: 15px;
    }
    </style>
</head>

<body>

<canvas id='canvas' width='700' height='700'>
    Canvas not supported
</canvas>


</body>
<script>
    var L = 1
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d')
    function drawRect(x, y) {
        x = L * x
        y = canvas.height - y * L - L
        context.fillRect(x, y, L, L)
    }
    function draw(x_start, y_start, x_end, y_end) {// k>0的情况，k小于0时转化
        let delta_x = x_end - x_start
        let delta_y = y_end - y_start
        let slope = delta_y / delta_x
        let cnt = 0
        let x_current = x_start
        let y_current = y_start
        let offset = 0
        let d = 0
        let a = 2 * delta_x * d
        while (x_current < x_end) {
            drawRect(x_current, y_current)
            let x_next = x_current + 1
            let y_next = y_current
            if (a + 2 * delta_y - 2 * offset * delta_x - 2 * delta_x > 0) {
                y_next = y_current + 1
                offset = 1
            } else {
                offset = 0
            }
            a = a + 2 * delta_y - 2 * offset * delta_x
            x_current = x_next
            y_current = y_next
            cnt += 1
        }
    }
    // drawRect(0, 0)
    function drawLine(x_start, y_start, x_end, y_end) {
        let x_start0 = x_start
        let y_start0 = y_start
        let x_end0 = x_end
        let y_end0 = x_end
        let end = x_end
        let k0 = (y_end - y_start) / (x_end - x_start)
        let k = k0
        if (k0 > 1) {
            let t = x_start
            x_start = y_start
            y_start = t
            t = x_end
            x_end = y_end
            y_end = t
        } else if (k0 >= -1 && k0 < 0) {
            let t = y_start
            y_start = y_end
            y_end = t
        } else if (k0 < -1) {
            let t = y_start
            y_start = y_end
            y_end = t

            t = x_start
            x_start = y_start
            y_start = t
            t = x_end
            x_end = y_end
            y_end = t
        }
        let delta_x = x_end - x_start
        let delta_y = y_end - y_start
        let x_current = x_start
        let y_current = y_start
        console.log(x_start, x_end)
        let offset = 0
        let d = 0
        let a = 2 * delta_x * d
        let total = 500
        let cnt = 0
        while (x_current < x_end) {
            if (k0 > 0 && k0 <= 1) {
                drawRect(x_current, y_current)
            } else if (k0 >= 1) {
                drawRect(y_current, x_current)
            } else if (k0 >= -1 && k0 < 0) {
                drawRect(-x_current + delta_x, y_current)
            } else if (k0 < -1) {
                // console.log(y_current, x_current)
                // drawRect(-y_current + delta_x, x_current)
                // drawRect(x_current, y_current)
                // drawRect(y_current, x_current)
                drawRect(-y_current + delta_y, x_current)
            }
            let x_next = x_current + 1
            let y_next = y_current
            if (a + 2 * delta_y - 2 * offset * delta_x - 2 * delta_x > 0) {
                y_next = y_current + 1
                offset = 1
            } else {
                offset = 0
            }
            a = a + 2 * delta_y - 2 * offset * delta_x
            x_current = x_next
            y_current = y_next
            cnt += 1
        }
   }
   console.log("max_x=" + Math.round(canvas.width / L)  + 'max_y=' + Math.round(canvas.height / L))
    // drawLine(0, 50, 350, 166)
    // drawLine(0, 50, 350, 400)
    // drawLine(0, 50, 350, 1100)
    // drawLine(0, 50, 350, -116)
    // drawLine(0, 50, 50, 0)
    // drawLine(0, 50, 150, 0)
    // drawLine(0, 0, 300, 100)
    drawLine(0, 0, 300, 300)
    // drawLine(0, 0, 300, 900)
    // drawLine(0, 150, 16, 102)
    drawLine(0, 100, 33, 1)
    drawLine(0, 350, 350, 0)





</script>
</html>
